import { defineComponent } from 'vue';
import { getAnnounce } from "@/api/home"
import SheltV2 from '../../common/SheltV2';
import "./index.less"
import { Icon, Swipe, SwipeItem } from 'vant';


export default defineComponent({
    name: 'Announce',
    setup() {
        const {VITE_STATIC_URL} = import.meta.env;
        const swipeRef = ref();
        const swipeAuto = ref(6000);
        const data = ref([]) as AnyObject;

        const formatUrl = (url:string)=>{            
            return url.replace("https://","http://")
        }
        getAnnounce().then(res => {
            data.value = res.data.list;
            console.log(data.value);

        })


        return () => (
            <div
                class="swipe_wrap"
                onMouseenter={() => (swipeAuto.value = 0)}
                onMouseleave={() => (swipeAuto.value = 6000)}
            >
                <Swipe
                    ref={swipeRef}
                    lazy-render
                    show-indicators={false}
                    autoplay={swipeAuto.value}
                >
                    {data.value?.map((_item: AnyObject) => (
                        <SwipeItem
                            key={_item.id}
                            onClick={()=>window.open(formatUrl(_item.url),"_blank")}
                        >
                            <img src={`${VITE_STATIC_URL}/tcpl/notice_img.png`} />
                            {/* <img src={formatUrl(_item.image)} /> */}
                            <p class="swiper_title">{_item.title}</p>
                        </SwipeItem>
                    ))}
                </Swipe>
                {/* <div class="indicator_wrap position-center flex-between">
                </div> */}
                    <div
                        onClick={() => swipeRef.value.prev()}
                        class="flex-center indicator_item left_indicator"
                    >
                        <Icon name="arrow-left" />
                    </div>
                    <div
                        onClick={() => swipeRef.value.next()}
                        class="flex-center indicator_item right_indicator"
                    >
                        <Icon name="arrow" />
                    </div>
            </div>

        );
    }
});
